import Component from "../Component.js";
import Type from "../../experience/db/Type.js";

const Draw = ol.interaction.Draw;

export default class Monitor extends Component {
    constructor() { super(); }

    template() {}

    control() {
        // 从选择器接收发来的消息
        this.emitter.on("monitor-deleted", async () => {
            this.emitter.locked = true;

            const id = this.emitter.params[0], self = this;
            const dialog = self.app.dialog.confirm('确认将服务器的数据删除?', async () => {
                const config = self.algo.getConfig();
                const data = await self.api.delMonitor({
                    id: id, meta_id: config.meta_id
                });

                if (data.code === 0) {
                    await self.db.refresh(Type.Monitor, data.data);
                    await self.drawer.draw(Type.Monitor);
                }

                this.emitter.emit("cancel-selected");
                this.emitter.locked = false;
            }, () => {
                this.emitter.emit("cancel-selected");
                this.emitter.locked = false;
                dialog.close();
            });
        });

        this.$$("#add-monitor").on("click", () => {
            this.toast('请在地图上添加一个点代表定位卡,点击Escape取消本次添加。');
            const config = this.algo.getConfig(), self = this;

            window.onkeydown = function(event) {
                if (event.defaultPrevented) return;

                let handled = false;
                if (event.key === "Escape") {
                    handled = true;
                    self.drawer.removeInteraction(draw);
                    self.drawer.source(Type.Modify).clear();
                }

                if (handled) event.preventDefault();
            }

            this.drawer.source(Type.Modify).clear();
            const draw = new Draw({ source: this.drawer.source(Type.Modify), type: 'Point' });
            this.drawer.addInteraction(draw);

            draw.on('drawend', (event) => {
                const point = event.feature.getGeometry().getCoordinates();
                this.app.dialog.prompt("请输入摄像头编号?", async (code) => {
                    const x = this.algo.denormalX(point[0]);
                    const y = this.algo.denormalY(point[1]);
                    const node_id = parseInt(code);
                    if (isNaN(node_id) || node_id < 0 || node_id > 1000) {
                        this.toast("编号为小于1000的正整数.");
                        return;
                    }

                    const data = await this.api.addMonitor( {
                        meta_id: config.meta_id,
                        point: [x, y],
                        node_id: node_id
                    });

                    if (data.code === 0) {
                        await this.db.refresh(Type.Monitor, data.data);
                        await this.drawer.draw(Type.Monitor);
                    } else {
                        this.toast(data.message);
                    }

                    this.drawer.removeInteraction(draw);
                    this.drawer.source(Type.Modify).clear();
                });
            })
        })
    }
}